<template >

   <div id="resourceManagement">
     <div id="tabelTitle">
       回访任务
     </div>
     <div id="table">
       <avue-crud
         v-model="form"
         :search.sync="searchForm"
         :page.sync="page"
         :data="tableData"
         :table-loading="tableLoading"
         :option="tableOption"
         @on-load="getList"
         @search-change="searchChange"
         @refresh-change="refreshChange"
         @size-change="sizeChange"
         @current-change="currentChange"
         @row-update="handleUpdate"
         @row-save="handleSave"
         @row-del="rowDel"
       >
         <template slot-scope="{disabled,size}" slot="stuNameSearch">
           <div class="inputStyle">
             <el-input placeholder="请输入姓名或手机号" :disabled="disabled" :size="size" style="width:50%; "
                       v-model="searchForm.keyWord"></el-input>
           </div>
         </template>
         <template slot="menu" slot-scope="{row,size}">
           <el-button type="primary" :size="size" @click="addTrack(row)">添加跟踪记录</el-button>
         </template>
       </avue-crud>
     </div>
     <el-dialog
       title="新增跟踪记录"
       :visible.sync="dialogVisible"
       width="60%"
     >
       <div>
         <avue-form ref="formForm" v-model="formForm" :option="formOption"  @submit="submit">
         </avue-form>
       </div>

     </el-dialog>
   </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixin.vue"
export default {
  name: "returnVisitTask",
  mixins: [tableMixins],
  data(){
    return{
      dialogVisible: false,
      form: {},
      data: [],
      //访问接口前缀

      url: "yuanjiu.testnew/tn-task-list",
      searchForm: {},
      // 表格参数
      tableOption: {
        labelWidth:200,
        searchSpan:6,
        border: true,
        index: false,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        searchMenuSpan:10,
        // searchLabelWidth: 100,
        calcHeight: 300,
        dialogWidth: 900,
        menuWidth: 200,
        menu: true,
        menuAlign: 'center',
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        addBtn: false,
        selection: true,
        rowKey: "id",
        emptyBtn: true,
        editBtn: false,
        viewBtn: true,
        delBtn: false,
        emptyBtnText: "重置",
        editBtnText: "修改",
        maxHeight: 645000,
        searchSize: "medium",
        column: [
          {
            prop: 'stuName',
            label: '姓名',
            search: true,
            searchLabelWidth:'50',
          },
          {
            prop: 'priorLvl',
            label: '优先级',
            type:'select',
            search:true,
            span:24,
            searchLabelWidth:'60',
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PRIOR_LVL',
            props: {
              label: "itmName",
              value: "itmId",
              res: "result"
            },
            rules: [{
              required: true,
              message: "请选择优先级",
              trigger: "change"
            }]
          },
          {
            prop: 'productId',
            label: '培训类别',
            type: "select",
            dicUrl: '/yuanjiu.testnew/tn-product/listTnProduct',
            dicMethod: 'post',
            props: {
              label: "productName",
              value: "productId",
              res: "result"
            },
            search:true,
            searchLabelWidth:'80',
            rules: [{
              required: true,
              message: "请选择培训类别",
              trigger: "change"
            }]
          },

          {
            prop: 'flowNum',
            label: '跟踪次数',
          }
          ,
          {
            prop: 'phoneNum',
            label: '手机号',
          },
          {
            prop: 'area',
            label: '地域',
          },
          {
            prop: 'chanelCode',
            label: '渠道',
            search:true,
            searchLabelWidth:'50',
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=CHANEL_CODE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
            rules: [{
              required: true,
              message: "请选择渠道",
              trigger: "change"
            }]
          },
          {
            prop: 'sourceCode',
            label: '来源途径',
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=SOURCE_CODE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
          },
          {
            prop: 'status',
            label: '进展情况',
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PRO_STS',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
          },
          {
            prop: 'overTime',
            label: '超时情况',
          },
          {
            prop: 'allocTime',
            label: '分配时间',
          },
        ]
      },
      addUrl: "insertOrUpdate",
      listUrl: 'pageTnTaskListRevisit',
      distributionList: [],
      //新增跟踪记录表单
      formForm: {},
      formOption:{
        column: [
          {
            label: "跟踪类型",
            prop: "flowTypeCode",
            type: "select",
            display:true,
            span: 12,
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=FLOW_TYPE',
            props: {
              label: 'itmName',
              value: 'itmVal',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }],
            filterable: true
          },
          {
            label: "跟踪时长",
            prop: "duration",
            span: 12,
          },
          {
            label: "跟踪结果",
            prop: "resultCode",
            type: "select",
            span: 12,
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=FLOW_RSLT',
            props: {
              label: 'itmName',
              value: 'itmVal',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }],
            filterable: true,
            change: ({value,column}) => {
              if(value==102){
                this.formOption.column[4].display =true
                this.formOption.column[5].display =true
              }
              else {
                this.formOption.column[4].display =false
                this.formOption.column[5].display =false
              }
              // console.log('值改变',value,column,)
            },
          },
          {
            label: "优先级",
            prop: "deptId",
            type: "select",
            span: 12,
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PRIOR_LVL',
            props: {
              label: 'itmName',
              value: 'itmVal',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }],
            filterable: true
          },
          {
            label: "入学时间",
            prop: "entranceStartTime",
            type: "date",
            display:false,
            format:'yyyy-MM-dd',
            valueFormat:'yyyy-MM-dd',
            span: 12,
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "blur"
            }],
          },
          {
            label: "入学班级",
            prop: "classId",
            type: "select",
            display:false,
           dicUrl: '/yuanjiu.testnew/tn-class/listTnClass',
            dicMethod: 'post',
            props: {
              label: 'className',
              value: 'classId',
              res: 'result'
            },
          span: 12,
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "blur"
            }],
          },
          {
            label: "跟踪记录",
            prop: "remark",
            type: "textarea",
            span: 24,
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "blur"
            }],
          },
          {
            label: "下次跟踪时间",
            prop: "nextFlowTime",
            type: "date",
            format:'yyyy-MM-dd',
            valueFormat:'yyyy-MM-dd',
            span: 12,
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "blur"
            }],
          }
        ]
      }
    }
  },
  methods:{
    uploadExcel(){
      // console.log('daoru')
    },
    addTrack(row){
      // console.log(row)
      // console.log('添加跟踪记录')
      this.formForm.stuId =row.stuId
      this.dialogVisible =true
    },
    //提交记录
    submit(){
      // console.log(this.formForm)
      this.$httpService.post('/yuanjiu.testnew/tn-task-list/insertOrUpdate', this.formForm).then(res => {
        this.$message.success('操作成功');
        this.dialogVisible = false
      })
    }
  },
  mounted() {

  },


}
</script>

<style scoped>
.inputStyle{
  width: 600px;
}
@media only screen and (max-width: 1600px){
  .inputStyle{
    width: 530px;
  }
}
@media only screen and (max-width: 1500px){
  .inputStyle{
    width: 430px;
  }
}
@media only screen and (max-width: 1366px){
  .inputStyle{
    width: 330px;
  }
}
@media only screen and (max-width: 900px){
  .inputStyle{
    width: 600px;
  }
}

</style>

